<template>
  <div class="logo-select" ref="wrapperRef">
    <ul class="logo-list">
      <li class="logo-item" :class="{checked: currentLogo && currentLogo.name === item.name}" v-for="item in logoList" :key="item.name" @click="onSelect(item)">
        <img class="logo" :src="item.url" />
        <el-icon class="select-icon" color="#ffffff" size="16px"><Select /></el-icon>
        <span class="delete" v-if="item.canRemove" @click.stop="remove(item)">
          <el-icon size="16"><Delete /></el-icon>
        </span>
      </li>
      <li class="logo-item add-item" @click="toAdd">
        <el-icon size="30px"><DocumentAdd /></el-icon>
        <span class="label">导入LOGO</span>
      </li>
    </ul>
    <AddLogo v-if="addVisible" @menu-click="addLogoMenuClick" />
    <div class="confirm-item">
      <el-button @click="confirmSelect" class="btn" type="primary" size="default" v-if="!addVisible && currentLogo">确认选择</el-button>
    </div>
  </div>
</template>

<script setup>
  import { ref, defineEmits, nextTick } from 'vue'
  const remote = require("@electron/remote")
  const fs = require('fs')
  import AddLogo from './AddLogo.vue'
  import { ElMessageBox } from 'element-plus'

  const $emit = defineEmits(['success'])
  const addVisible = ref(false)
  const wrapperRef = ref(null)

  const logoList = ref([
    {name: 'apple', url: require('../assets/img/logo/apple.png'),},
    {name: 'canon', url: require('../assets/img/logo/canon.png'),},
    {name: 'dji', url: require('../assets/img/logo/dji.png'),},
    {name: 'fujifilm', url: require('../assets/img/logo/fujifilm.png'),},
    {name: 'hasselblad', url: require('../assets/img/logo/hasselblad.png'),},
    {name: 'leica', url: require('../assets/img/logo/leica.png'),},
    {name: 'lumix', url: require('../assets/img/logo/lumix.png'),},
    {name: 'nikon', url: require('../assets/img/logo/nikon.png'),},
    {name: 'olympus', url: require('../assets/img/logo/olympus.png'),},
    {name: 'pentax', url: require('../assets/img/logo/pentax.png'),},
    {name: 'ricoh', url: require('../assets/img/logo/ricoh.png'),},
    {name: 'sigma', url: require('../assets/img/logo/sigma.png'),},
    {name: 'sony', url: require('../assets/img/logo/sony.png'),},
    {name: 'zeiss', url: require('../assets/img/logo/zeiss.png'),},
  ])

  const path = remote.app.getPath('userData')
  const logoFoldPath = `${path}/assets/photo_frame_logos`

  // 读取本地logo列表
  const readFiles = () => {
    fs.readdir(logoFoldPath, (err, list) => {
      if (err) {
        return
      }
      const names = list.filter(item => item != '.DS_Store' && !fs.statSync(logoFoldPath + '/' + item).isDirectory())
      const results = names.map(item => {
        const buf = window.URL.createObjectURL(new Blob([fs.readFileSync(logoFoldPath + '/' + item)], {type: 'application/png'}))
        return {
          name: item,
          url: buf,
          canRemove: true, // 导入的logo可删除
        }
      })
      results.forEach(item => {
        if (!logoList.value.map(l => l.name).includes(item.name)) {
          logoList.value.push(item)
        }
      })
    })
  }

  readFiles()

  
  let currentLogo = ref(null)

  const onSelect = (item) => {
    currentLogo.value = item
  }

  const toAdd = () => {
    addVisible.value = true
    nextTick(() => {
      wrapperRef.value.scrollTo({top: wrapperRef.value.scrollHeight + 999, behavior: 'smooth'})
    })
  }

  const remove = ({name}) => {
    ElMessageBox.confirm('确认删除该LOGO?', {
      cancelButtonText: '取消',
      confirmButtonText: '确认',
    })
    .then(() => {
      const index = logoList.value.findIndex(item => item.name === name)
      logoList.value.splice(index, 1)
      // 删除本地文件
      fs.unlinkSync(logoFoldPath + '/' + name)
      if (name === currentLogo.value.name) {
        currentLogo.value = null
      }
    })
    .catch(() => {
      // catch error
    })
  }

  const addLogoMenuClick = (e) => {
    const { name } = e
    if (name === 'cancel') {
      addVisible.value = false
    }
    if (name === 'confirm') {
      addVisible.value = false
      readFiles()
    }
  }

  const confirmSelect = () => {
    $emit('success', {
      url: currentLogo.value.url
    })
  }



</script>

<style lang="less" scoped>
  :deep(.add-logo) {
    margin-top: 20px;
  }
  .logo-select {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    padding-bottom: 40px;
  }
  .logo-list {
    display: flex;
    flex-wrap: wrap;
  }
  .logo-item {
    width: 100px;
    height: 100px;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 20px;
    margin-top: 20px;
    position: relative;
    overflow: hidden;
    opacity: 0.8;
    transition: opacity 0.2s ease 0s;
    cursor: pointer;
    &.add-item {
      flex-direction: column;
      align-items: center;
      color: #333;
      font-size: 14px;
      .label {
        padding-top: 7px;
      }
    }
    &:hover {
      opacity: 1;
      .delete {
        display: block;
      }
    }
    &:before {
      content: "";
      position: absolute;
      width: 85px;
      height: 85px;
      right: 0;
      bottom: 0;
      background-color: #409EFF;
      transform: rotate(45deg) translate(90%, 20%);
      opacity: 0;
      transition: opacity 0.2s ease 0s;
    }
    &.checked {
      opacity: 1;
      &:before {
        opacity: 1;
      }
      .select-icon {
        opacity: 1;
      }
    }
    .logo {
      width: 60%;
      height: auto;
      cursor: pointer;
    }
    .delete {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 2011;
      color: #999;
      padding: 3px;
      transition: all 0.2s ease 0s;
      display: none;
      &:hover {
        background-color: #F56C6C;
        color: #fff;
      }
    }
    // 遮盖图片: 禁止拖拽图片到电脑桌面
    &:after {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      z-index: 2010;
    }
  }
  .select-icon {
    transition: opacity 0.2s ease 0s;
    transform: rotate(0);
    position: absolute;
    right: 3px;
    bottom: 3px;
    opacity: 0;
  }
  .confirm-item {
    padding: 20px;
    display: flex;
    justify-content: center;
    .btn {
      width: 100%;
      box-sizing: border-box;
    }
  }
  .confirm-item {
    padding: 20px;
    display: flex;
    justify-content: center;
    .btn {
      width: 100%;
      box-sizing: border-box;
    }
  }
</style>
